import router from '@/router'
import store from '@/store'
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式
// import { asyncRoutes } from '@/router'

const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  NProgress.start()
  // to:跳转到哪个路由
  // from:从哪个路由中跳转过来
  // next 放行next() 或者重定向 next({path:'/'})
  const token = store.getters.token
  if (token) {
    // 有token的情况
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      // 判断一下 vuex中有没有userInfo 这个数据。没有的时候才请求
      if (Object.keys(store.state.user.userInfo).length <= 0) {
        const { roles: { menus }} = await store.dispatch('user/getProfile')
        // 1.拿到当前用户的访问权限
        // console.log(menus)
        // 拿到权限后 应该从asyncRoutes筛选动态路由
        // console.log(asyncRoutes)
        // const otherRoutes = asyncRoutes.filter(item => {
        //   return menus.includes(item.children[0].name)
        // })
        // console.log(otherRoutes)
        // store.commit('permission/setRoutes', otherRoutes)
        // 筛选完成之后，应该把筛选之后的数据 放到路由对象中
        const otherRoutes = await store.dispatch('permission/filterRoutes', menus)
        // 2.路由对象 动态添加用户可以访问的路由规则
        // addRoutes  动态添加路由是异步的过程
        router.addRoutes([...otherRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 下面这行代码 可以保证addRoutes执行完毕了
        next({
          // path: to.path,
          // query: to.query,
          ...to,
          replace: true
        })
      } else {
        next()
      }
    }
  } else {
    // 没有token的情况
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next({ path: '/login' })
      NProgress.done()
    }
  }
})

// 当使用next()进行重定向的时候  不会执行afterEach这个钩子函数
router.afterEach((from, to) => {
  NProgress.done()
})
